import { Input, Select } from "antd";
import React, { useCallback } from "react";
import { EditorFormProps } from "../declare";
import { BannerEditor } from "./BannerEditor";
import { LabelEditor } from "./LabelEditor";
import { NoticeEditor } from "./NoticeEditor";
import { ShopEditor } from "./ShopEditor";

import './style.less';

function useDataEditor(props: EditorFormProps) {
  const handleChange = useCallback((v) => {
    props.onChange(v)
    props.formChange!({
      [props.defination.type]: v
    })
  }, [props])

  return {
    handleChange
  }
}
export function DataEditor(props: EditorFormProps) {
  const {handleChange} = useDataEditor(props)
  const rest = {
    ...props,
    onChange: handleChange
  }
  switch (props.defination.type) {

    case 'banner':
      return (
        <BannerEditor
          {...rest}
        />
      )
    case 'noticeList':
      return (
        <NoticeEditor
          {...rest}
        />
      )
    case 'shopListScroll':
      return (
        <ShopEditor
          {...rest}
          isToday
        />
      )
    case 'shopList':
      return (
        <ShopEditor
          {...rest}

        />
      )
    case 'shopListTwo':
      return (
        <ShopEditor
          {...rest}

        />
      )
    case 'shopListOne':
      return (
        <ShopEditor
          {...rest}

        />
      )
    case 'label':


      return (
        <LabelEditor
          {...rest}
        />
      )
    case 'entry':
      return (
        <LabelEditor
          {...rest}
          isEntry
        />
      )
    case 'link':
      return (
        <Select>
          <Select.Option>首页</Select.Option>
          <Select.Option>商品分类</Select.Option>
        </Select>
      )
    default:

      return (
        <Input></Input>
      )
  }

}